<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<div class="line-big">
	<div class="xl5">
		<div class="panel border-back">
			<div class="panel-head text-center">
				<h3>
					<strong>根据日期查询订单交易统计</strong>
				</h3>
			</div>
			<div class="panel-body">
				<div class="line-big">
					<div class="xl3"></div>
					<div class="xl6">
						<div class="label">
							<label for="goods_name">*开始日期</label>
						</div>
						<div class="date form_date" data-date="" data-date-format="yyyy-mm-dd">
							<input id="start_date" class="input form-control" size="16" type="text" value='' readonly>
							<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</div>
					<div class="xl3"></div>
				</div>
				<div class="line-big margin-top">
					<div class="xl3"></div>
					<div class="xl6">
						<div class="label">
							<label for="goods_name">*结束日期</label>
						</div>
						<div class="date form_date" data-date="" data-date-format="yyyy-mm-dd">
							<input id="end_date" class="input form-control" size="16" type="text" value='' readonly>
							<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span>
							</span>
						</div>
					</div>
					<div class="xl3"></div>
				</div>
			</div>
			<div class="panel-foot bg-white border-back text-center">
				<div class="line-big">
					<div class="xl3"></div>
					<div class="xl6">
						<button id="search_order_count_button" class="button border-blue radius-rounded button-block">
							<span class="icon-search"></span> 查询交易统计
						</button>
					</div>
					<div class="xl3"></div>
				</div>
			</div>
		</div>
		<br />
		<div class="panel">
			<div class="panel-head">
				<strong>查询结果<span id="search_date_scale"></span></strong>
			</div>
			<div class="panel-body">
				<div class="line-big">
					<div class="xl5 text-center">
						<h1 id="search_order_num_count" class="margin text-green" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>订单总数(个)</span>
						</h5>
					</div>
					<div class="xl7 text-center">
						<h1 id="search_order_price_count" class="margin text-red" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>总销售额(元)</span>
						</h5>
					</div>
				</div>
			</div>
		</div>
		<br />
	</div>
	<div class="xl7">
		<div class="panel border-main">
			<div class="panel-head border-main bg-main">
				<strong>当月订单交易统计<span id="month_date_scale"></span></strong>
			</div>
			<div class="panel-body">
				<div class="line-big">
					<div class="xl5 text-center">
						<h1 id="month_order_num_count" class="margin text-green" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>订单总数(个)</span>
						</h5>
					</div>
					<div class="xl7 text-center">
						<h1 id="month_order_price_count" class="margin text-red" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>总销售额(元)</span>
						</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="panel margin-big-top border-red">
			<div class="panel-head border-red bg-red">
				<strong>当年订单交易统计<span id="year_date_scale"></span></strong>
			</div>
			<div class="panel-body">
				<div class="line-big">
					<div class="xl5 text-center">
						<h1 id="year_order_num_count" class="margin text-green" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>订单总数(个)</span>
						</h5>
					</div>
					<div class="xl7 text-center">
						<h1 id="year_order_price_count" class="margin text-red" style="height: 64px; line-height: 64px; font-size: 48px;">0</h1>
						<h5 class="margin">
							<span>总销售额(元)</span>
						</h5>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	//日期选择器
	$('.form_date').datepicker(
	{
		format : "yyyy-mm-dd",
		startView : 2,
		todayBtn : "linked",
		clearBtn : true,
		language : "zh-CN",
		autoclose : true,
		todayHighlight : true,
		orientation : "top left"
	});

	$("#search_order_count_button").click(function()
	{
		var start_date = $("#start_date").val();
		var end_date = $("#end_date").val();
		if (start_date.length == 0 || end_date.length == 0)
		{
			toastr.warning("开始日期和结束日期都不能为空", '提示!');
			return false;
		}
		if (Date.parse(start_date) >= Date.parse(end_date))
		{
			toastr.warning("开始日期必须小于结束日期", '提示!');
			return false;
		}
		var obj = $(this);

		obj.attr("disabled", "disabled");
		$.post("shop/sp_get_order_count_info_do",
		{
			"start_date" : start_date,
			"end_date" : end_date
		}, function(json)
		{
			if (json.success == false)
			{
				obj.removeAttr("disabled");
				toastr.error(json.info, '操作失败!');
			}
			else if (json.success == true)
			{
				obj.removeAttr("disabled");
				$("#search_order_num_count").html(json.order_num_count);
				$("#search_order_price_count").html(json.order_price_count);
				$("#search_date_scale").html("(" + start_date + "到" + end_date + ")");
				$("#search_order_num_count").countTo(
				{
					from : 0,
					to : json.order_num_count,
					speed : 1000,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
				$("#search_order_price_count").countTo(
				{
					from : 0,
					to : json.order_price_count,
					speed : 1000,
					decimals : 2,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
			}
		},
		//返回类型
		"json");
	});

	Date.prototype.format = function(format)
	{
		var o =
		{
			"M+" : this.getMonth() + 1, //month 
			"d+" : this.getDate(), //day 
			"h+" : this.getHours(), //hour 
			"m+" : this.getMinutes(), //minute 
			"s+" : this.getSeconds(), //second 
			"q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 
			"S" : this.getMilliseconds()
		//millisecond 
		}

		if (/(y+)/.test(format))
		{
			format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}

		for ( var k in o)
		{
			if (new RegExp("(" + k + ")").test(format))
			{
				format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
			}
		}
		return format;
	}
	function getLastDay(year, month)
	{
		var new_year = year; //取当前的年份  
		var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）  
		if (month > 12) //如果当前大于12月，则年份转到下一年  
		{
			new_month -= 12; //月份减  
			new_year++; //年份增  
		}
		var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天  
		return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24));//获取当月最后一天日期  
	}

	$(function()
	{
		var now = new Date();
		var monthNowStr = now.format("yyyy-MM-");
		var yearNowStr = now.format("yyyy-");
		var start_date1 = monthNowStr + "01";
		var end_date1 = getLastDay(now.getFullYear(), now.getMonth() + 1).format("yyyy-MM-dd");
		var start_date2 = yearNowStr + "01-01";
		var end_date2 = yearNowStr + "12-31";
		$.post("shop/sp_get_order_count_info_do",
		{
			"start_date" : start_date1,
			"end_date" : end_date1
		}, function(json)
		{
			if (json.success == false)
			{
			}
			else if (json.success == true)
			{
				$("#month_order_num_count").html(json.order_num_count);
				$("#month_order_price_count").html(json.order_price_count);
				$("#month_date_scale").html("(" + start_date1 + "到" + end_date1 + ")");
				$("#month_order_num_count").countTo(
				{
					from : 0,
					to : json.order_num_count,
					speed : 1000,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
				$("#month_order_price_count").countTo(
				{
					from : 0,
					to : json.order_price_count,
					speed : 1000,
					decimals : 2,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
			}
		},
		//返回类型
		"json");
		$.post("shop/sp_get_order_count_info_do",
		{
			"start_date" : start_date2,
			"end_date" : end_date2
		}, function(json)
		{
			if (json.success == false)
			{
			}
			else if (json.success == true)
			{
				$("#year_order_num_count").html(json.order_num_count);
				$("#year_order_price_count").html(json.order_price_count);
				$("#year_date_scale").html("(" + start_date2 + "到" + end_date2 + ")");
				$("#year_order_num_count").countTo(
				{
					from : 0,
					to : json.order_num_count,
					speed : 1000,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
				$("#year_order_price_count").countTo(
				{
					from : 0,
					to : json.order_price_count,
					speed : 1000,
					decimals : 2,
					refreshInterval : 50,
					formatter : function(value, options)
					{
						return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
					}
				});
			}
		},
		//返回类型
		"json");
	});
</script>